<template>
  <div id="container" :style="{height:height}" />
</template>

<script>
import cirl from '@/assets/breath_blue.png'
export default {
  name: 'Amap',
  props: {
    points: {
      // 经纬度
      type: Array,
      default: () => []
    },
    height: {
      // 自定义地图高度
      type: String,
      default: '700px'
    }
  },
  data() {
    return {
      cirl,
      map: '',
      loca: '',
      polygon: '',
      ScatterLayer: '',
      center: [114.58247, 38.063541],
      defaultCity: '石家庄市'
    }
  },
  watch: {
    points: {
      handler(val) {
        if (val) {
          const features = val.map(item => {
            return {
              'type': 'Feature',
              'properties': {
                'proName': item.proName,
                'proNum': item.proNum,
                'workload': item.workload,
                'finishWorkload': item.finishWorkload,
                'ratio': 0,
                'rank': 96
              },
              'geometry': {
                'type': 'Point',
                'coordinates': [item.lon, item.lat]
              }
            }
          })
          const data = {
            type: 'FeatureCollection',
            features: features
          }

          this.ScatterLayer.setSource(new Loca.GeoJSONSource({
            data
          }))
          this.ScatterLayer.setStyle({
            unit: 'px',
            size: [40, 40],
            texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
            // texture: this.cirl,
            animate: true,
            duration: 1000,
            zIndex: 1000
          })
          this.loca.add(this.ScatterLayer)
          this.loca.animate.start()
        }
      },
      deep: true
    }
  },
  mounted() {
    // 初始化地图页面
    this.initMap()
    this.init1(this.defaultCity)
  },
  beforeDestroy() {
    // 销毁地图
    this.map.destroy()
  },
  methods: {
    //   初始化地图页面
    initMap() {
      // 地图初始化应该在地图容器div已经添加到DOM树之后
      this.map = new AMap.Map('container', {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        center: this.center, // 设置初始化坐标
        zoom: 10, // 设置初始化级别
        viewMode: '3D',
        mapStyle: 'amap://styles/40035571fa9fdd05a26fe1b05f48fdc9' // 设置地图背景图
      })

      // LOCA 数据可视化
      this.loca = new Loca.Container({
        eventSupport: true,
        map: this.map
      })

      // ScatterLayer 贴地呼吸点
      this.ScatterLayer = new Loca.ScatterLayer({
        zIndex: 1200
      })
    },
    // 区域遮盖
    init1(city) {
      if (this.polygon) {
        this.map.remove(this.polygon)
      }
      AMap.plugin('AMap.DistrictSearch', () => {
        new AMap.DistrictSearch({
          extensions: 'all',
          subdistrict: 0
        }).search(city, (status, result) => { // 外多边形坐标数组和内多边形坐标数组
          const outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true)
          ]
          const holes = result.districtList[0].boundaries
          const pathArray = [outer]
          pathArray.push.apply(pathArray, holes)
          this.polygon = new AMap.Polygon({
            pathL: pathArray,
            strokeColor: '#21488a', // 城市边界颜色
            strokeWeight: 2,
            fillColor: '#e2eaec', // 遮罩背景色白色
            fillOpacity: 1
          })
          this.polygon.setPath(pathArray)
          this.map.add(this.polygon)
        })
      })

      //  各区域颜色填充
      const datas = [
        '桥西区-#cd6938',
        '新华区-#58b4cb',
        '裕华区-#19ae00',
        '长安区-#fe44ff',
        '井陉矿区-#8e69ff',
        '藁城区-#ffff33',
        '鹿泉区-#feff99',
        '栾城区-#feb5fe',
        '井陉县-#feb431',
        '正定县-#c7b434',
        '行唐县-#fe68ff',
        '灵寿县-#c7ff00',
        '高邑县-#c9b4f9',
        '深泽县-#ffb69c',
        '赞皇县-#8eb400',
        '无极县-#c769ff',
        '平山县-#22b4ff',
        '元氏县-#20fffe',
        '赵县-#ff6833',
        '晋州市-#59fe01',
        '新乐市-#8efeff',
        '辛集市-#90b4fe'
      ]
      for (let i = 0; i < datas.length; i++) {
        this.addshanghai(datas[i])
      }
    },
    addshanghai(area) {
      area = area.split('-')
      // 加载行政区划插件
      AMap.plugin('AMap.DistrictSearch', () => {
        const opts = {
          subdistrict: 1, // 返回下一级行政区
          extensions: 'all', // 返回行政区边界坐标组等具体信息
          level: 'city' // 查询行政级别为 市
        }
        // 实例化DistrictSearch
        const district = new AMap.DistrictSearch(opts)
        district.setLevel('district')
        // 行政区查询
        district.search(area[0], (status, result) => {
          const bounds = result.districtList[0].boundaries
          const polygons = []
          if (bounds) {
            for (let i = 0, l = bounds.length; i < l; i++) {
              // 生成行政区划polygon
              const polygon = new AMap.Polygon({
                map: this.map,
                strokeWeight: 2,
                path: bounds[i],
                fillOpacity: 0.5,
                fillColor: area[1],
                strokeColor: '#21488a',
                zIndex: -100
              })
              polygons.push(polygon)
              polygon.on('click', (e) => {
                const feat = this.ScatterLayer.queryFeature(e.pixel.toArray())
                if (feat) {
                  const info = []
                  info.push(`
                      <div class="map-info-window">
                        <p style="margin: 10px 0; color: #333; font-size: 14px">${feat.properties.proName}</p>
                        <p style="margin: 5px 0; color: #666; font-size: 12px">项目编号：${feat.properties.proNum}</p>
                        <p style="margin: 5px 0; color: #666; font-size: 12px">已完成钻孔：${feat.properties.finishWorkload}</p>
                        <p style="margin: 5px 0; color: #666; font-size: 12px">钻孔总数：${feat.properties.workload}</p>
                      </div>
                      `)
                  const infoWindow = new AMap.InfoWindow({
                    content: info.join('') // 使用默认信息窗体框样式，显示信息内容
                  })
                  infoWindow.open(this.map, feat.coordinates)
                }
              })
            }
            // this.map.setFitView()// 地图自适应
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.map-info-window{
  p{
    margin: 10px;
  }
}
</style>
